<template>
  <div class="file-list-wrapper">
    <!-- 操作按钮 -->
    <el-header height="auto">
      <OperationMenu
          @getDataList="getDataList"
      ></OperationMenu>
    </el-header>
    <!-- 文件列表-表格模式 -->
    <UserTable
        :fileType="fileType"
        :filePath="filePath"
        :fileList="fileList"
        :loading.sync="loading"
        v-if="fileModel === 0"
        @getTableDataByType="getTableDataByType"
        @click.native.right="handleClickRight"
    ></UserTable>
    <div class="pagination-wrapper">
      <div class="current-page-count">当前页{{ fileList.length }}条</div>
      <!-- 回收站不展示分页组件 -->
      <el-pagination
          :current-page="pageData.currentPage"
          :page-size="pageData.pageCount"
          :total="pageData.total"
          :page-sizes="[10, 50, 100, 200]"
          :layout="
					screenWidth <= 768
						? 'total, prev, next, jumper'
						: 'sizes, total, prev, pager, next'
				"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          v-if="fileType !== 6"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>

import UserTable from './components/UserTable.vue'

import {
  getDepartmentTree
} from '@/request/user.js'
import BreadCrumb from "_c/common/BreadCrumb.vue";
import FileTimeLine from "_c/file/components/FileTimeLine.vue";
import FileGrid from "_c/file/components/FileGrid.vue";
import FileTable from "_c/common/FileTable.vue";
import OperationMenu from "./components/OperationMenu.vue";

export default {
  name: 'User',
  components: {
    OperationMenu, FileTable, FileGrid, FileTimeLine, BreadCrumb,
    UserTable,
  },
  data() {
    return {
      loading: true, //  表格数据-loading
      dataList: [], //  表格数据-文件列表
    }
  },
  computed: {
    // 屏幕宽度
    screenWidth() {
      return this.$store.state.common.screenWidth
    }
  },
  watch: {

  },
  created() {
    this.getTableData()
  },
  methods: {

    /**
     * 表格数据获取相关事件 | 获取文件列表数据
     */
    getTableData() {
      this.loading = true
      this.showDataList()
      this.$store.dispatch('showStorage')
    },
    /**
     * 表格数据获取相关事件 | 获取当前路径下的文件列表
     */
    showDataList() {
      let data = {
      }
      getDepartmentTree(data).then((res) => {
        if (res.success) {
          this.dataList = res.data
          this.loading = false
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~_a/styles/varibles.styl';

.file-list-wrapper {
  >>> .el-header {
    padding: 0;
  }

  .middle-wrapper {
    margin-bottom: 8px;
  }

  .pagination-wrapper {
    position: relative;
    border-top: 1px solid $BorderBase;
    height: 44px;
    line-height: 44px;
    text-align: center;

    .current-page-count {
      position: absolute;
      left: 16px;
      height: 32px;
      line-height: 32px;
      font-size: 13px;
      color: $RegularText;
    }
  }
}
</style>
